const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// css提取
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// css压缩
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

// console.log(process)
// 函数
module.exports = (env) => {
  // 打印环境变量 --- 打印环境变量
  console.log('env:', env.NODE_ENV)
  return {
    mode: 'development', // production
    entry: path.join(__dirname, '/src/main.js'),
    output: {
      path: path.join(__dirname, 'dist'),
      filename: 'bundle.js',
      clean: true, //  在打包的过程中，帮助你删除 以前打包好的dist
    },
    /**
     * vue-loader -> VueLoaderPlugin
     * file-loader 处理大图片
     * url-loader 处理小图片
     * sass-loader/css-loader/ vue-style-loader:style-loader /
     * css提取 css压缩
     */
    module: {
      rules: [
        {
          test: /\.vue$/,
          use: 'vue-loader',
        },
        // babel-loader帮助把es6的语法转译成es5的语法 （可以转译.vue中的js文件）
        // {
        //   test: /\.m?js$/,
        //   exclude: /(node_modules|bower_components)/,
        //   use: {
        //     loader: 'babel-loader',
        //     options: {
        //       presets: ['@babel/preset-env'],
        //       plugins: ['@babel/plugin-transform-runtime'],
        //     },
        //   },
        // },
        // 处理css提取loader
        /**
         * vue-style-loader 和 style-loader 功能基本一致，可以通用
         * vue-style-loader 支持ssr （服务端渲染）
         */
        {
          test: /\.(css|scss|sass)$/i,
          use: [
            // MiniCssExtractPlugin.loader 只能在生产环境下使用

            env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'vue-style-loader', // 插入页面
            'css-loader', // css转成commonjs模块
            // 'sass-loader', // 将scss转成css
            {
              loader: 'sass-loader',
              options: {
                // 帮助引入scss的公共拓展文件（考试不考，但是，补充知识点）
                additionalData: `@import "src/assets/css/variables.scss";`,
              },
            },
          ],
        },
        // 处理图片的loader file-loader 处理较大的图片
        {
          test: /\.(png|jpe?g|gif)$/i,
          use: [
            {
              loader: 'file-loader',
              options: {
                // 输出的图片叫什么名字
                name: '[name].[ext]',
                // 将图片输出到哪个文件夹下
                outputPath: 'images',
              },
            },
          ],
        },
        // url-loader 处理较小的图片 成为base64
        // 自动将小图片处理成base64格式，减少http请求
        {
          test: /\.(png|jpg|gif)$/i,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 8192,
              },
            },
          ],
        },
      ],
    },
    // css压缩 将提取出来的css进行压缩
    optimization: {
      minimizer: [
        // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
        `...`,
        new CssMinimizerPlugin(),
      ],
    },
    plugins: [
      // css提取（将css从打包好的js中提取出来）
      new MiniCssExtractPlugin({
        filename: '[name].css',
      }),
      // 处理模版html插件
      new HtmlWebpackPlugin({
        template: 'public/index.html',
      }),
      // 增强vue-loader插件
      new VueLoaderPlugin(),
    ],
    devServer: {
      port: 8080,
      open: true,
      // proxy: {},
    },
    resolve: {
      alias: {
        '@': path.resolve('src'),
      },
    },
  }
}
